<template>
  <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>

    <FormItem prop="user">
      <Input type="text" v-model="formInline.user" placeholder="Username">
        <Icon type="ios-person-outline" slot="prepend"></Icon>
      </Input>
    </FormItem>
    <FormItem prop="password">
      <Input type="password" v-model="formInline.password" placeholder="Password">
        <Icon type="ios-lock-outline" slot="prepend"></Icon>
      </Input>
    </FormItem>
    <FormItem prop="password2">
      <Input type="password" v-model="formInline.password2" placeholder="Password">
        <Icon type="ios-lock-outline" slot="prepend"></Icon>
      </Input>
    </FormItem>
    <FormItem>
      <Button type="primary" @click="handleSubmit('formInline')">Signin</Button>
    </FormItem>
    <router-link tag="a" to="/login">
      登录
    </router-link>
  </Form>
</template>
<script>
export default {
  data () {
    return {
      formInline: {
        user: '',
        password: '',
        password2: ''
      },
      ruleInline: {
        user: [
          {required: true, message: 'Please fill in the user name', trigger: 'blur'}
        ],
        password: [
          {required: true, message: 'Please fill in the password.', trigger: 'blur'},
          {type: 'string', min: 2, message: 'The password length cannot be less than 6 bits', trigger: 'blur'}
        ],
        password2: [
          {required: true, message: 'Please fill in the password.', trigger: 'blur'},
          {type: 'string', min: 2, message: 'The password length cannot be less than 6 bits', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.formInline.password == this.formInline.password2) {
            this.$axios.post('api/reg', {
              username: this.formInline.user,
              password: this.formInline.password,
              email: 'qq@comxx'
            }).then(res => {
              if (res.data.code === 200) {
                this.$Message.success('成功')
                this.$router.push('/login')
              } else {
                this.$Message.error('纯在')
              }
            }).catch(e => {
              console.log(e)
            })
          } else {
            this.$Message.error('摩玛不一致')
          }
        } else {
          this.$Message.error('Fail!')
        }
      })
    }
  }
}
</script>
